import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  Dimensions,
  Animated,
  NativeModules,
  StatusBar,
  NativeAppEventEmitter,
  Platform,
  Alert,
} from 'react-native';

import TabNavigator from 'react-native-tab-navigator';

import Index from './Index';
import Address from './Address';
import Shops from './Shops';
import ShopsAll from './ShopsAll';
import Service from './Service';
import Me from './Me';

import WebView from './WebView';

import { connect } from 'react-redux';

const {width: windowW, height: windowH} = Dimensions.get('window');
var HandlerNotification;
import XFetch from '../XFetch';
import {changeAddress} from '../action/address';

class Main_Tab extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 1,
      marginLeftValue: new Animated.Value(0)
    };
  }

  componentWillUnmount(){

  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
        (initialPosition) => {
          fetch(`http://apis.map.qq.com/ws/coord/v1/translate?locations=${initialPosition.coords.latitude},${initialPosition.coords.longitude}&type=1&key=FCABZ-SIX3W-UB2RT-RZWX7-FLELQ-7BBBF`,{
            type:'GET'
          }).then(data=>{
              data.json().then(data=> {
                fetch(`http://www.weiweigo.com/app/address.aspx?method=autoGetAddress&lat=${data.locations[0].lat}&lon=${data.locations[0].lng}`, {
                  method: 'GET'
                }).then(data=> {
                  data.json().then(data=> {
                    this.props.changeAddress({
                      name: data.name,
                      addressId: data.aid
                    });
                  })

                });
              })
          })
        },
        (error) => {
          Alert.alert('提示', '请先开启定位');
        },
        {enableHighAccuracy: false, timeout: 20000, maximumAge: 1000}
    );
  }

  _change(index){
    this.setState({
      selectedTab:index
    })
  }

  render() {
    const navigator = this.props.navigator;
    return(
      <View style={styles.container}>
        <TabNavigator>
          <TabNavigator.Item
            selected={this.state.selectedTab === 1}
            title="首页"
            selectedTitleStyle={{color:'#333'}}
            renderIcon={() => <Image source={require('../imgs/tab11.png')} style={{width:21,height:22.5}}/>}
            renderSelectedIcon={() => <Image source={require('../imgs/tab11act.png')} style={{width:21,height:23}}/>}
            onPress={() => this._onPressTab(1) }>
            <Index navigator={navigator} change={this._change.bind(this)}/>
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === 2}
            title={this.props.address.name}
            selectedTitleStyle={{color:'#333'}}
            renderIcon={() => <Image source={require('../imgs/tab22.png')} style={{width:24,height:23}}/>}
            renderSelectedIcon={() => <Image source={require('../imgs/tab22act.png')} style={{width:24.5,height:23}}/>}
            onPress={() => this._onPressTab(2) }>
            <Address navigator={navigator} change={this._change.bind(this)}/>
          </TabNavigator.Item>
          <TabNavigator.Item
              selected={this.state.selectedTab === 3}
              title={this.props.status?"全部商家":"附近商家"}
              selectedTitleStyle={{color:'#333'}}
              renderIcon={() => <Image source={require('../imgs/tab33.png')} style={{width:24.5,height:22}}/>}
              renderSelectedIcon={() => <Image source={require('../imgs/tab33act.png')} style={{width:25.5,height:23}}/>}
              onPress={() => this._onPressTab(3) }>
              {
                  this.props.status?<ShopsAll navigator={navigator}/>:<Shops navigator={navigator} change={this._change.bind(this)}/>
              }
          </TabNavigator.Item>
          <TabNavigator.Item
              selected={this.state.selectedTab === 4}
              title="附近服务"
              selectedTitleStyle={{color:'#333'}}
              renderIcon={() => <Image source={require('../imgs/tab44.png')} style={{width:19,height:23}}/>}
              renderSelectedIcon={() => <Image source={require('../imgs/tab44act.png')} style={{width:20,height:24}}/>}
              onPress={() => this._onPressTab(4) }>
            <Service navigator={navigator} change={this._change.bind(this)}/>
          </TabNavigator.Item>
          <TabNavigator.Item
              selected={this.state.selectedTab === 5}
              title="发布"
              selectedTitleStyle={{color:'#333'}}
              renderIcon={() => <Image source={require('../imgs/tab55.png')} style={{width:18,height:22.5}}/>}
              renderSelectedIcon={() => <Image source={require('../imgs/tab55act.png')} style={{width:18.5,height:22.5}}/>}
              onPress={() => this._onPressTab(5) }>
            <Me navigator={navigator} />
          </TabNavigator.Item>
        </TabNavigator>
      </View>
    );
  }

  _onPressTab(n) {
    this.setState({
      selectedTab: n
    });
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column'
  },
  tabLine: {
    width: windowW/2,
    height: 4,
    backgroundColor: '#18bdce'
  }
});

const mapStateToProps = (state) => {
  return {
    address:state.address.address,
    status:state.classify.status
  }
}

export default connect(
  mapStateToProps,{
      changeAddress
  }
)(Main_Tab)
